<template>
    <div class="label-text">
        <div style="margin-bottom: 30px;">
            <el-button size="small" class="add_btn" @click="addTab(editableTabsValue)">
                添加标签
            </el-button>
        </div>
        <div class="tab_line">
            <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="`轮播图${index+1}`"
                    :name="item.name">
                    <el-form :model="item" ref="numberValidateForm" label-width="100px">
                        <el-form-item label="标签" prop="string">
                            <el-input type="string" v-model.number="item.biaoqian" autocomplete="off" ></el-input>
                        </el-form-item>
    
                        <div v-for="(itemForm,idx) in item.editableFrom" :key="idx" :class="idx != 0 ? 'form_border':''">
                            <span class="close_button" v-if="idx !== 0" @click="closeItem(index)">
                                <i class="el-icon-close"></i>
                            </span>
                            <p v-if="idx !== 0" style="margin: 10px 0 22px 72px;">内容{{idx}}</p>
                            <el-form-item label="标题" :label-width="idx != 0 ? '70px':'100px'">
                                <el-input v-model="itemForm.biaoti"></el-input>
                            </el-form-item>
                            <el-form-item label="内容" :label-width="idx != 0 ? '70px':'100px'" style="position: relative;">
                                <el-input type="textarea" v-model="itemForm.content" class="textarea"></el-input>
                                <el-button v-if="idx == 0" @click="addForm(index)" class="add">增加</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
/**
* description: 标签文本模块
*/
export default {
    data() {
        return {
            editableTabsValue: '1',
            editableTabs: [
                {
                    name: '1',
                    biaoqian:'',
                    editableFrom: [
                        {
                            biaoti: '111',
                            content: 'bb',
                        }
                    ],
                }
            ],
            tabIndex: 1,
        }
    },
    methods: {
        // 添加标签
        addTab(targetName) {
            let newTabName = ++this.tabIndex + '';
            this.editableTabs.push({
                name: newTabName,
                editableFrom: [
                    {
                        biaoti: '',
                        content: '',
                    }
                ],
            });
            this.editableTabsValue = newTabName;
        },
        // 移除标签
        removeTab(targetName) {
            let tabs = this.editableTabs;
            let activeName = this.editableTabsValue;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                        }
                    }
                });
            }

            this.editableTabsValue = activeName;
            this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        },
        closeItem(index) {
            this.editableTabs[index].editableFrom.splice(index, 1)
        },
        addForm(id) {
            this.editableTabs[id].editableFrom.push({
                biaoti: '',
                content: '',
            });
            console.log(this.editableTabs);
        },
        submit() {
            return {formData: this.editableTabs}
        }
    }
}
</script>

<style lang="scss" scoped>
.label-text {
    padding-bottom: 100px;
}
.form_border {
    border: 1px dotted #CBCED4;
    margin: 18px 87px 10px 28px;
}
.close_button {
    float: right;
    position: relative;
    top: 8px;
    right: 10px;
    font-size: 20px;
}

.add_btn {
    width: 88px;
    background: #00B3A8;
    border-radius: 4px;
    border: none;
    color: #fff;
    margin: 30px 0 0 120px;
}

.tab_line {
    width: 800px;
    background: #FFFFFF;
    border: 1px solid #F4F5F7;
    margin-bottom: 10px;
}

.add {
    width: 60px;
    height: 32px;
    border-radius: 3px;
    border: 1px solid #00B3A8;
    margin-left: 20px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #00B3A8;
    position: absolute;
    bottom: 0;
    position: absolute;
    bottom: 0;
}

.add:hover {
    background-color: none;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item {
    border: none;
}

::v-deep .el-tabs--card>.el-tabs__header .is-active {
    border-top: 3px solid #00B3A8;
}

::v-deep .el-tabs--card>.el-tabs__header {
    border-bottom: none;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: none;
    background: #F4F5F7;
}

::v-deep .el-tabs__item.is-active {
    background: #fff;
    color: #000;
    border-top: #00B3A8;
    line-height: 34px;
}

::v-deep .el-tabs__item:hover {
    color: #000;
}

::v-deep .el-tabs__nav-wrap {
    background: #F4F5F7;
}
</style>